import {connect} from 'react-redux'
import React, {Component} from 'react'
import { Tabs, List, Badge } from 'antd-mobile';
const Item = List.Item
const Brief = Item.Brief

import Header from "../components/header";
import {getSystemMessage} from "../redux/actions/indexAction"

class gongGaoContainer extends Component {
  constructor (props){
   super(props)
   this.state= {
    isShow:[]
   }
}
    show(isShow,index){
      // const isShow = this.state[name]
      // debugger
      var num = isShow.indexOf(index)
      num< 0 ? isShow.push(index) : isShow.splice(num,1)
      this.setState({
        isShow
      })
    }
    componentDidMount(){
      const {dispatch} = this.props
      dispatch(getSystemMessage())
    }


   render() {
    const {user,Index} = this.props
    // console.log(Index.get("systemMessages"),"gonggao")
    let gonggao = Index.get("systemMessages")
      return <div className="awarditem">
          <Header title="公告" {...this.props}></Header>
          <div className="container">
          <List className="my-list">
          {
           gonggao.map((item, index)=>{
              return <div className={this.state.isShow.indexOf(index)>-1? "recorditem downarrow" : "recorditem"}  key={index}>
              <Item 
              arrow="horizontal"
              multipleLine
              onClick={() => {
                this.show(this.state.isShow,index)
              }}
            > <div className="title"><h3>{item.ggName}</h3></div> <Brief>{item.ggContent}</Brief>
             </Item>
             <div className={this.state.isShow.indexOf(index)>-1? "msgcontent" : "msgcontent hidden"}>
                {item.ggContent}
            </div>
            </div>
            })
          }

        </List>
    </div>

      </div>
   } 


}

function mapStateToProps(state) {
  return {
    Index:state.Index
  }
}

export default connect(mapStateToProps)(gongGaoContainer)